<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Datatable Demo</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="//cdn.bootcss.com/datatables/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./css/jquery.dataTables.css" /> -->
    <link href="https://cdn.bootcss.com/datatables/1.10.16/css/dataTables.foundation.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/fixedColumns.dataTables.min.css" />
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="./js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.bootcss.com/datatables/1.10.16/js/dataTables.bootstrap.min.js"></script>
    <script src="./js/dataTables.fixedColumns.min.js"></script>
    <style>
        .selected {
            background: #006699;
        }
        
        td,
        tr {
            background: #fff;
            min-width: 20px;
            min-height: 20px;
            text-align: center;
        }
        
        table.dataTable {
            margin: 0 !important;
        }
        /* 显示排序的bug */
        
        th.sorting_asc:after,
        th.sorting_asc::before {
            display: none !important;
        }
        
        th.sorting_asc {
            padding-right: 15px !important;
        }
    </style>
</head>
<!-- dt-->
<!--固定列 dt-->

<body>
    <section class="panel container">
        <div class="panel-heading text-center ">
            <h2>Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能</h2>
            <div class="text-center panel-body">
                <a class="" href="http://datatables.club/">Datatables中文网</a>
            </div>
        </div>
        <!--search-->
        <div class="panel-body row col-6 form-inline">
            <select class='column form-control'>
					<option value=".name">name</option>
					<option value=".class">class</option>
				</select>
            <input type="search" placeholder="搜索" class="search_value form-control" />
            <input type="button" class="btn search" value="search" />
        </div>
        <!-- table-->
        <div class="panel-body">
            <table id="table" class="table table-striped " width="100%"></table>
        </div>
        <!--btn option-->
        <div class="panel-footer">
            <button type="button" class="add btn btn-success">Add</button>
            <button type="button" class="del btn btn-danger">Del</button>
            <button type="button" class="clear btn btn-warning">Clear</button>
        </div>

    </section>
    <section class="container">

        <ol style='color:red'>
            <li>Datatable 和 datatable配置可以共用但api的不一样的</li>
            <li>Datatable 数组的值必须对应键值才能显示</li>
            <li>table.clear().draw() 可以清除表格数据</li>

        </ol>
        <!--dataTable -->
        <!--固定列 dt-->
        <script>
            //列属性
            var columns = [{
                "data": "cleackbox",
                "title": "<input type='checkbox' class='checkded-all' >", //标题
                "defaultContent": "<input type='checkbox' class='checkded' >", //默认内容
                "orderable": false, //不排序

            }, {
                "data": "name", //key
                "defaultContent": "", //默认内容
                "render": false, //显示第[num]
                "jQueryUI": false,
                "title": "name", //标题
                "visible": true, //显示
                "class": "text-center name",
                "createdCell": function(td, cellData, rowData, row, col) {

                }, //生成时回调,重绘时将不在调用
                "orderable": false, //不排序

            }, {
                "data": "class",
                "title": "class", //标题
                "defaultContent": "", //默认内容
                "class": "class",

            }, {
                "data": "size",
                "title": "size", //标题
                "defaultContent": "", //默认内容

            }, {
                "data": "function",
                "title": "function", //标题
                "defaultContent": "", //默认内容

            }, {
                "data": "text",
                "title": "备注", //标题

                "defaultContent": "", //默认内容

            }, {
                "data": "no",
                "title": "版本", //标题

                "defaultContent": "", //默认内容

            }, {
                "data": "start_date",
                "title": "开始日期", //标题

                "defaultContent": "", //默认内容

            }, {
                "data": "salary",
                "title": "option1", //标题

                "defaultContent": "", //默认内容

            }];
            //table 数据
            var datas = [{
                "name": "dataTable",
                "class": "jQuery",
                "function": 'DataTbale',
                "size": "400",
                "start_date": "2011/04/25",
                "office": "Edinburgh",
                "extn": 5421
            }, ];

            //表格init
            var table = $('#table').DataTable({
                "filter": false,
                "destroy": true, //允许重绘
                "order": [], //初始化排序
                "ordering": true, //关闭表格的排序功能
                searching: true, //本地 searcher
                "autoWidth": true, //width auto
                "jQueryUI": false, //需要引入对应的css
                "deferRender": true, //延迟渲染
                // "info": false, //table bottom text
                "language": {
                    "info": "Showing page <b>_PAGE_</b> of _PAGES_",
                    paginate: {
                        next: "下一页",
                        previous: "上一页",
                        processing: "正在处理中。。。",
                    }
                },
                "data": datas, //数据
                "columns": columns, //列头
                scrollX: true, //允许X滚动
                //scrollY: 150,
                scrollCollapse: true,
                // paging: false, //分页
                fixedColumns: {
                    //固定列
                    leftColumns: 2,
                    rightColumns: 0
                }

            });

            //add data 
            table.rows.add([{
                "name": "add",
                "class": "System Architect",
                "salary": "$3,120",
                "start_date": "2011/04/25",
                "office": "Edinburgh",
                "extn": ''
            }, {
                "name": "add1",
                "class": "System Architect",
                "salary": "$3,120",
                "start_date": "2011/04/25",
                "office": "Edinburgh",
                "extn": ''
            }, ]).draw();

            /**
             * 搜索表格数据
             * @event select#click
             * */
            $(".search").on("click", function() {
                var column = $(".column").val(); //获得搜索的行号

                var value = $(".search_value").val(); //获得搜索的内容
                console.log(column, value)
                    //searching false 时无法触发,可以用index或class搜索
                table.columns(column).search(value).draw();
            })

            /**
             * 在表中修改数据
             * @event select#dblclick
             * */
            $("#table").on("dblclick", 'td', function(e) {
                var value = table.cell(this).data();
                $(this).html("<input style='width: 100%;' type='text'value='" + value + "' />");

                $(this).children('input').focus().on("blur", editor_blur);
                e.stopPropagation();
            })

            /**
             * 保存数据
             * @event select#blur
             */
            function editor_blur() {
                $(this).off("blur", editor_blur);
                var value = $(this).val();
                var $td = $(this).parent('td');
                table.cell($td).data(value).draw(); //修改
            }
            //全选 全取消
            $("body").on("change", ".checkded-all", function() {
                var bool = $(this).prop("checked");
                $(".DTFC_LeftBodyWrapper").find("input[type='checkbox']").prop("checked", bool);
            })

            //删除选中数据
            $(".del").on("click", function() {

                    //要删除的对象
                    var dels = [];
                    $("input:checked.checkded ").each(function() {
                            var $tr = $(this).parents("tr");
                            //tr 是通过 data-dt-row 或 num 获得
                            dels.push($tr.data("dtRow"));
                        })
                        //删除
                    for (var i = 0; i < dels.length; i++) {
                        //获得要删除的值 i为已删除的数
                        var index = dels[i] - i;
                        if (i == dels.length - 1) {
                            //删除重绘
                            table.row(index).remove().draw();
                        } else {
                            //删除
                            table.row(index).remove();
                        }
                    }

                })
                //clear tabel
            $(".clear").click(function() {
                table.clear().draw();
            })

            //add one in table's' last
            $(".add").on("click", function() {
                table.row.add({
                    "name": "new"
                }).draw();
                //添加数组的时候会出现无数据

            })
        </script>
    </section>
    <!-- 服务器模式表格 -->
    <fieldset class="container">
        <legend>服务器模式</legend>

        <table id="table2" class="table table-striped"></table>

        <ol style='color:red'>
            <li>
                <p>返回的数据包括<a href="http://www.datatables.club/example/server_side/simple.html" target="_blank">demo</a>：</p>
                <ul>
                    <li>draw:对应重绘编号</li>
                    <li>recordsTotal:总条数</li>
                    <li>recordsFiltered:过滤后总条数</li>
                    <li>data:数据体</li>
                </ul>
            </li>
            <li>
                <p>调用API.draw()会发起请求，但不会发送<a href="http://datatables.club/manual/server-side.html" target="_blank">固定参</a>以外的参。</p>
                <ul>
                    <li>.ajax.url().load() 用链接传参的形式来解决，只会有一次请求</li>
                    <li>先向服务器提交后服务器回调，调用 ajax.reload() 重绘，会执行两次请求</li>
                </ul>
            </li>
        </ol>
        <script>
            var table2 = $('#table2').DataTable({
                "serverSide": true,
                "columns": columns, //列头
                ajax: "data.php",
                // "deferLoading": 57 //设定初始化数据条数生成分页
            });

            $("#table2").on("click", "td", function() {
                var $tr = $(this).parents("tr");
                //使用 ajax.url()API 方法来设置新的请求地址， load()方法才会有效
                //利用新链接发送请求和重绘
                table2.ajax.url("data.php?remove=1").load();
            })
        </script>
    </fieldset>
    <!-- 服务器模式表格 end-->

</body>

</html>